<!--<template>
  <doc-page-component v-if="content" :content="content"/>
</template>-->

<script>
import {markRaw, ref, watch} from "vue";
import {useRoute} from "vue-router";

import {DocPageComponent} from "@/components/doc-page-component";
import {MDPLUS} from "@/components/md-plus";

export default {
  name: "DocPage",
  components: {
    DocPageComponent
  },
  setup(){
    const route = useRoute();

    // const content = ref('');
    /*watch(() => route.path, async (path) => {
      console.log('路由已切换 ---> path:',path);
      if(path.startsWith('/')) path = path.slice(1);
      console.log(`await import('@/docs/' + ${path} + '.md')`);

      content.value = (await import('@/docs/' + path + '.md')).default
      //todo src/docs/Overview/theme 是 .vue文件, 要额外处理
    },{immediate: true});

    return {
      content
    }*/

    const ContentComponentRef = ref(null);
    watch(() => route.path, async (path) => {
      console.log('路由已切换 ---> path:',path);
      if(path.startsWith('/')) path = path.slice(1);

      if(path.includes('.vue')){
        // ContentComponentRef.value = (await import('@/docs/' + path)).default;
        //↑ [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.
        ContentComponentRef.value = markRaw((await import('@/docs/' + path)).default);

      }else {
        const content = (await import('@/docs/' + path + '.md')).default;
        ContentComponentRef.value = <MDPLUS content={content}/>;
      }

    },{immediate: true});

    return () => {
      const ContentComponent = ContentComponentRef.value;

      return (
        ContentComponent && (
          <pl-root>
            <doc-page-component>
              <ContentComponent/>
            </doc-page-component>
          </pl-root>
        )
      )
    };
  }
}
</script>

<style scoped>

</style>
